/* ========================================== LITTLE EXPLORERS LEARNING HUB Master Stylesheet ========================================== */ :root{ --blue:#2D8FD5; --green:#69B34C; --yellow:#F4C542; --orange:#F2994A; --coral:#E76F51; --purple:#8E7DF2; --teal:#22B8B2; --aqua:#5BC0EB; --background:#F7FAFC; --white:#FFFFFF; --card:#FFFFFF; --text:#334155; --light-text:#64748B; --border:#E2E8F0; --shadow: 0 12px 30px rgba(0,0,0,.08); --radius:22px; --transition:.3s ease; } /* ========================================== RESET ========================================== */ *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ font-family:"Inter",sans-serif; background:var(--background); color:var(--text); line-height:1.65; overflow-x:hidden; } img{ display:block; max-width:100%; height:auto; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; } /* ========================================== CONTAINER ========================================== */ .container{ width:100%; max-width:1400px; margin:0 auto; padding:0 32px; } /* ========================================== TYPOGRAPHY ========================================== */ h1, h2, h3, h4{ font-family:"Nunito",sans-serif; font-weight:800; color:var(--text); } .section-title{ text-align:center; margin-bottom:70px; } .section-title h2{ font-size:2.8rem; margin-bottom:20px; } .section-title p{ max-width:760px; margin:auto; color:var(--light-text); font-size:1.05rem; } /* ========================================== HEADER ========================================== */ header{ position:sticky; top:0; left:0; z-index:1000; background:rgba(255,255,255,.96); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); } .nav-container{ min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:32px; } /* ========================================== LOGO ========================================== */ .logo{ display:flex; align-items:center; gap:16px; flex-shrink:0; } .logo img{ width:72px; height:72px; object-fit:contain; } .logo h1{ font-size:1.55rem; line-height:1.1; } .logo span{ display:block; color:var(--green); font-weight:700; } /* ========================================== SEARCH ========================================== */ .search-bar{ flex:1; max-width:520px; display:flex; background:#F4F7FA; border:2px solid transparent; border-radius:999px; overflow:hidden; transition:var(--transition); } .search-bar:focus-within{ border-color:var(--blue); } .search-bar input{ flex:1; border:none; outline:none; background:transparent; padding:16px 22px; font-size:.95rem; } .search-bar button{ width:65px; border:none; background:var(--blue); color:white; cursor:pointer; transition:var(--transition); } .search-bar button:hover{ background:#2379B5; } /* ========================================== NAVIGATION ========================================== */ nav{ flex-shrink:0; } nav ul{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; } nav li{ margin:0; padding:0; } nav a{ display:block; position:relative; padding:10px 0; color:var(--text); font-weight:600; white-space:nowrap; transition:.25s ease; } nav a:hover{ color:var(--blue); } nav a::after{ content:""; position:absolute; left:50%; bottom:-8px; width:0; height:3px; background:var(--green); border-radius:999px; transform:translateX(-50%); transition:.25s ease; } nav a:hover::after, nav a.active::after{ width:70%; } /* ========================================== MOBILE BUTTON ========================================== */ /* ========================================== STAR MENU FINAL FIX ========================================== */ .mobile-menu{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; border:none; background:white; border-radius:50%; cursor:pointer; font-size:2rem; z-index:2000; } .menu-star{ display:block; } .menu-close{ display:none; } /* OPEN BUTTON */ .mobile-menu.active .menu-star{ display:none; } .mobile-menu.active .menu-close{ display:block; } /* NAV HIDDEN BY DEFAULT */ nav{ display:none; } /* NAV OPEN */ nav.active{ display:block; width:100%; background:#FFFFFF; padding:25px 0; } nav.active ul{ display:flex; flex-direction:column; align-items:center; gap:15px; } /* ALL DEVICES */ .nav-container{ position:relative; } @media(min-width:769px){ nav.active{ position:absolute; top:92px; left:0; box-shadow:0 15px 35px rgba(0,0,0,.15); } } /* ========================================== HERO ========================================== */ .hero{ background:linear-gradient( 180deg, #FFFFFF 0%, #F8FBFD 100% ); padding:90px 0 110px; } .hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:70px; } .hero-content{ max-width:700px; } .eyebrow{ display:inline-block; padding:10px 20px; margin-bottom:28px; background:#EAF7FD; color:var(--blue); border-radius:999px; font-size:.9rem; font-weight:700; letter-spacing:.3px; } .hero h2{ font-size:clamp(3rem,5vw,4.5rem); line-height:1.08; margin-bottom:28px; } .hero p{ font-size:1.15rem; color:var(--light-text); line-height:1.9; margin-bottom:40px; } /* ========================================== HERO BUTTONS ========================================== */ .hero-buttons{ display:flex; align-items:center; justify-content:flex-start; gap:20px; margin-top:30px; } .btn{ display:inline-flex; align-items:center; justify-content:center; min-width:210px; padding:18px 34px; border-radius:999px; font-weight:700; transition:var(--transition); } .btn-primary{ background:var(--blue); color:#fff; } .btn-primary:hover{ transform:translateY(-4px); box-shadow:var(--shadow); } .btn-secondary{ background:#fff; border:2px solid var(--border); } .btn-secondary:hover{ background:var(--green); color:#fff; border-color:var(--green); } /* ========================================== HERO BADGES ========================================== */ .hero-badges{ display:flex; flex-wrap:wrap; gap:16px; margin-top:25px; } .hero-badges div{ display:flex; align-items:center; gap:8px; padding:12px 20px; background:#FFFFFF; border-radius:999px; box-shadow:0 10px 25px rgba(0,0,0,.08); font-weight:600; white-space:nowrap; } /* ========================================== HERO IMAGE ========================================== */ .hero-image{ display:flex; justify-content:center; align-items:center; } .hero-image img{ width:100%; max-width:650px; border-radius:32px; box-shadow: 0 20px 60px rgba(0,0,0,.12); } /* ========================================== BROWSE BY AGE ========================================== */ .age-section{ padding:110px 0; background:#F7FCFF; } .age-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; } .age-card{ background:#fff; padding:42px 30px; text-align:center; border-radius:24px; border:1px solid var(--border); box-shadow:var(--shadow); transition:var(--transition); } .age-card:hover{ transform:translateY(-8px); border-color:var(--green); } .age-icon{ font-size:4rem; margin-bottom:22px; } .age-card h3{ font-size:1.5rem; margin-bottom:12px; } .age-card p{ color:var(--light-text); margin-bottom:20px; } .age-card span{ color:var(--blue); font-weight:700; } /* ========================================== FEATURED STUDIES ========================================== */ .featured-studies{ padding:110px 0; background:#FFFBEA; } .study-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:36px; align-items:start; } .study-card{ display:flex; flex-direction:column; overflow:hidden; background:#FFFFFF; border-radius:28px; border:1px solid var(--border); box-shadow:var(--shadow); transition:var(--transition); height:100%; } .study-card:hover{ transform:translateY(-10px); box-shadow:0 24px 50px rgba(0,0,0,.12); } .study-card:hover img{ transform:scale(1.05); } .study-content{ display:flex; flex-direction:column; flex:1; padding:28px; } .study-tag{ display:inline-block; align-self:flex-start; padding:8px 16px; border-radius:999px; color:#fff; font-size:.8rem; font-weight:700; } .study-content h3{ margin:20px 0 14px; font-size:1.6rem; } .study-content p{ flex:1; color:var(--light-text); line-height:1.8; margin-bottom:30px; } .study-footer{ display:flex; justify-content:space-between; align-items:center; gap:15px; } .study-footer span{ color:var(--green); font-weight:700; } .study-footer a{ color:var(--blue); font-weight:700; } /* Study Tag Colors */ .study-tag.blue{ background:var(--blue); } .study-tag.green{ background:var(--green); } .study-tag.orange{ background:var(--orange); } .study-tag.aqua{ background:var(--aqua); } .study-tag.coral{ background:var(--coral); } .study-tag.purple{ background:var(--purple); } /* ========================================== TEACHER FAVORITES ========================================== */ .teacher-favorites{ padding:110px 0; background:#FFFFFF; } .favorite-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; } .favorite-card{ background:#fff; border:1px solid var(--border); border-radius:24px; padding:40px 30px; text-align:center; box-shadow:var(--shadow); transition:var(--transition); } .favorite-card:hover{ transform:translateY(-8px); } .favorite-icon{ font-size:3.5rem; margin-bottom:24px; } .favorite-card h3{ margin-bottom:15px; font-size:1.45rem; } .favorite-card p{ color:var(--light-text); line-height:1.8; } /* ========================================== NEWEST ACTIVITIES ========================================== */ .new-activities{ padding:110px 0; background:#EEFDF6; } .activity-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; } .activity-card{ display:flex; flex-direction:column; background:#fff; border-radius:24px; border:1px solid var(--border); padding:35px; box-shadow:var(--shadow); transition:var(--transition); } .activity-card:hover{ transform:translateY(-8px); } .activity-badge{ display:inline-block; align-self:flex-start; padding:8px 18px; margin-bottom:22px; background:var(--green); color:#fff; border-radius:999px; font-size:.8rem; font-weight:700; } .activity-card h3{ font-size:1.5rem; margin-bottom:18px; } .activity-card p{ flex:1; color:var(--light-text); line-height:1.8; margin-bottom:28px; } .activity-meta{ display:flex; justify-content:space-between; align-items:center; gap:15px; font-size:.9rem; font-weight:700; color:var(--blue); } /* ========================================== EXPLORE THE LIBRARY ========================================== */ .library-highlight{ padding:110px 0; background:#FFFFFF; } .section-eyebrow{ display:inline-block; padding:10px 20px; margin-bottom:20px; background:#EAF7FD; color:var(--blue); border-radius:999px; font-size:.9rem; font-weight:700; letter-spacing:.4px; } .library-highlight .hero-buttons{ justify-content:center; margin-top:50px; } /* ========================================== INTEREST GRID ========================================== */ .interest-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:50px; } .interest-card{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:250px; padding:40px 30px; border-radius:28px; color:#fff; box-shadow:var(--shadow); transition:var(--transition); } .interest-card:hover{ transform:translateY(-8px); box-shadow:0 24px 50px rgba(0,0,0,.12); } .interest-icon{ font-size:3.5rem; margin-bottom:24px; } .interest-card h3{ color:#fff; font-size:1.5rem; margin-bottom:14px; } .interest-card p{ line-height:1.8; opacity:.95; } /* Card Colors */ .interest-card.blue{ background:#3B82F6; } .interest-card.green{ background:#22C55E; } .interest-card.yellow{ background:#FACC15; color:#374151; } .interest-card.yellow h3{ color:#374151; } .interest-card.orange{ background:#F97316; } .interest-card.purple{ background:#8B5CF6; } .interest-card.teal{ background:#14B8A6; } .interest-card.coral{ background:#EF4444; } .interest-card.aqua{ background:#06B6D4; } /* ========================================== INTEREST AREAS ========================================== */ .interest-areas{ padding:110px 0; background:#FFF6FC; } /* ========================================== WHY TEACHERS LOVE US ========================================== */ .why-section{ padding:80px 0; background:#F4F3FF; } .why-grid{ display:grid; grid-template-columns:repeat(4,280px); justify-content:center; gap:32px; } .why-card{ text-align:center; background:#FFFFFF; border-radius:26px; border:1px solid var(--border); box-shadow:0 12px 30px rgba(0,0,0,.08); transition:.3s ease; } .why-card:hover{ transform:translateY(-8px); } .why-icon{ font-size:2.5rem; margin-bottom:18px; } .why-card h3{ margin-bottom:15px; font-size:1.4rem; } .why-card p{ color:var(--light-text); line-height:1.8; } /* ========================================== UNIVERSAL NEWSLETTER SECTION ========================================== */ .newsletter{ padding:120px 0; background: linear-gradient( 135deg, var(--blue), var(--green) ); } .newsletter-box{ display:grid; grid-template-columns:1.3fr .7fr; gap:60px; align-items:center; background:#FFFFFF; padding:60px; border-radius:32px; box-shadow:var(--shadow); } /* LEFT CONTENT */ .newsletter-tag{ display:inline-flex; align-items:center; padding:10px 22px; margin-bottom:25px; background:#EAF7FD; color:var(--blue); border-radius:999px; font-size:.85rem; font-weight:800; } .newsletter-content h2{ font-size:2.6rem; margin-bottom:20px; } .newsletter-content p{ color:var(--light-text); line-height:1.85; margin-bottom:30px; } /* BENEFITS */ .newsletter-benefits{ display:grid; grid-template-columns:repeat(2,1fr); gap:15px; } .newsletter-benefits li{ background:#F8FBFD; padding:14px 18px; border-radius:14px; font-weight:700; } /* FORM AREA */ .newsletter-form{ display:flex; flex-direction:column; gap:18px; } .newsletter-form input{ width:100%; height:58px; border:2px solid var(--border); border-radius:18px; padding:0 20px; font-size:1rem; outline:none; } .newsletter-form input:focus{ border-color:var(--blue); } .newsletter-form button{ height:58px; border:none; border-radius:18px; background:var(--blue); color:#FFFFFF; font-weight:800; font-size:1rem; cursor:pointer; transition:.3s ease; } .newsletter-form button:hover{ background:var(--green); transform:translateY(-3px); } /* MOBILE */ @media(max-width:900px){ .newsletter-box{ grid-template-columns:1fr; padding:40px 30px; } .newsletter-content h2{ font-size:2.2rem; } .newsletter-benefits{ grid-template-columns:1fr; } } /* ========================================== FOOTER ========================================== */ footer{ background:#233143; color:#fff; margin-top:0; } .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:50px; padding:80px 0; } footer h3, footer h4{ color:#fff; margin-bottom:20px; } footer p{ color:#CBD5E1; line-height:1.8; } footer li{ margin-bottom:14px; } footer a{ color:#CBD5E1; transition:var(--transition); } footer a:hover{ color:#fff; } .footer-bottom{ text-align:center; border-top:1px solid rgba(255,255,255,.08); padding:30px 0; } .footer-bottom p{ color:#94A3B8; } /* ========================================== SCROLL ANIMATION ========================================== */ section{ opacity:1; transform:none; } .js section{ opacity:0; transform:translateY(40px); transition: opacity .7s ease, transform .7s ease; } .js section.visible{ opacity:1; transform:none; } /* ========================================== LARGE DESKTOP ========================================== */ @media (max-width:1200px){ .container{ max-width:1100px; } .study-grid{ grid-template-columns:repeat(2,1fr); } .favorite-grid{ grid-template-columns:repeat(2,1fr); } .activity-grid{ grid-template-columns:repeat(2,1fr); } .interest-grid{ grid-template-columns:repeat(2,1fr); } .season-grid{ grid-template-columns:repeat(2,1fr); } .why-grid{ grid-template-columns:repeat(2,1fr); } } /* ========================================== TABLETS ========================================== */ @media (max-width:992px){ .hero-grid{ grid-template-columns:1fr; text-align:center; } .hero-content{ max-width:100%; } .hero-buttons{ justify-content:center; } .hero-badges{ justify-content:center; } .age-grid{ grid-template-columns:repeat(2,1fr); } .newsletter-box{ grid-template-columns:1fr; } .footer-grid{ grid-template-columns:repeat(2,1fr); } nav ul{ gap:18px; flex-wrap:wrap; } } /* ========================================== MOBILE ========================================== */ @media (max-width:768px){ .nav-container{ flex-wrap:wrap; } .mobile-menu{ display:flex; margin-left:auto; } .search-bar{ order:3; width:100%; max-width:100%; margin-top:15px; } nav{ display:none; width:100%; order:4; } nav.active{ display:block; } nav ul{ flex-direction:column; align-items:flex-start; gap:0; } nav li{ width:100%; border-top:1px solid var(--border); } nav a{ display:block; width:100%; padding:16px; } .hero{ padding:70px 0; } .hero h2{ font-size:2.5rem; } .hero-buttons{ flex-direction:column; } .hero-buttons .btn{ width:100%; } .hero-badges{ flex-direction:column; } .age-grid, .study-grid, .favorite-grid, .activity-grid, .interest-grid, .season-grid, .why-grid{ grid-template-columns:1fr; } .newsletter-benefits{ grid-template-columns:1fr; } .footer-grid{ grid-template-columns:1fr; text-align:center; } } /* ========================================== SMALL PHONES ========================================== */ @media (max-width:480px){ .container{ padding:0 20px; } .hero{ padding:60px 0; } .hero h2{ font-size:2rem; } .season-grid{ grid-template-columns:1fr; } } /* ========================================== SEASONAL LEARNING ========================================== */ .season-section{ padding:100px 0; background:#FFF8EF; } .season-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; } .season-card{ display:flex; flex-direction:column; align-items:center; text-align:center; background:#FFFFFF; padding:40px 30px; border-radius:24px; border:1px solid var(--border); box-shadow:var(--shadow); transition:var(--transition); } .season-card:hover{ transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,.12); } .season-icon{ display:flex; align-items:center; justify-content:center; width:80px; height:80px; margin-bottom:20px; font-size:3rem; line-height:1; } .season-card h3{ font-size:1.6rem; margin-bottom:15px; color:var(--text); } .season-card p{ font-size:1rem; line-height:1.7; color:var(--light-text); margin:0; max-width:240px; } /* ========================================== RESPONSIVE ========================================== */ @media (max-width:1200px){ .season-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:768px){ .season-grid{ grid-template-columns:1fr; } .season-card{ padding:35px 25px; } } /* ========================================== STUDIES PAGE ========================================== */ /* ========================================== STUDY HERO ========================================== */ .study-hero .container{ max-width:900px; } .breadcrumb{ display:flex; justify-content:center; align-items:center; gap:12px; margin-bottom:30px; font-size:.95rem; color:var(--light-text); } .breadcrumb a{ color:var(--blue); font-weight:600; } .study-hero h1{ font-size:clamp(3rem,5vw,4.5rem); margin-bottom:25px; color:var(--text); } .study-hero p{ max-width:760px; margin:0 auto 45px; font-size:1.15rem; line-height:1.9; color:var(--light-text); } /* ========================================== HERO SEARCH ========================================== */ .hero-search{ display:flex; justify-content:center; max-width:650px; margin:0 auto; background:#FFFFFF; border:2px solid var(--border); border-radius:999px; overflow:hidden; box-shadow:var(--shadow); } .hero-search input{ flex:1; border:none; outline:none; padding:18px 24px; font-size:1rem; background:transparent; } .hero-search button{ padding:0 35px; border:none; background:var(--blue); color:#FFFFFF; font-weight:700; cursor:pointer; transition:var(--transition); } .hero-search button:hover{ background:var(--green); } /* ========================================== FILTERS ========================================== */ .study-filters{ padding:35px 0 45px; background:#FFFFFF; border-bottom:1px solid var(--border); } .study-filters h2{ text-align:center; margin-bottom:30px; font-size:2rem; } .study-filters .container{ display:flex; flex-direction:column; align-items:center; } .filter-buttons{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:16px; width:100%; } .filter-btn{ min-width:170px; height:50px; padding:0 30px; border-radius:999px; font-size:.95rem; } .filter-btn:hover{ background:var(--green); border-color:var(--green); color:#FFFFFF; transform:translateY(-3px); } .filter-btn.active{ background:var(--blue); border-color:var(--blue); color:#FFFFFF; } /* ========================================== FEATURED STUDY ========================================== */ .featured-study{ padding:100px 0; background:#F8FBFD; } .featured-study-card{ display:grid; grid-template-columns:1.2fr .8fr; gap:60px; align-items:center; background:#FFFFFF; border-radius:32px; padding:60px; box-shadow:var(--shadow); } .featured-label{ display:inline-block; margin-bottom:20px; padding:10px 20px; background:#EAF7FD; color:var(--blue); border-radius:999px; font-size:.85rem; font-weight:700; letter-spacing:.5px; } .featured-text h2{ font-size:3rem; margin-bottom:25px; } .featured-text p{ color:var(--light-text); line-height:1.9; margin-bottom:35px; } .featured-highlights{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:40px; } .featured-highlights div{ background:#F8FBFD; padding:16px; border-radius:16px; font-weight:600; } .featured-image img{ width:100%; border-radius:28px; box-shadow:0 20px 50px rgba(0,0,0,.12); } /* ========================================== STUDY LIBRARY ========================================== */ .study-library{ padding:110px 0; background:#FFFFFF; } .study-library .study-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:35px; } .study-library .study-card{ display:flex; flex-direction:column; background:#FFFFFF; border:1px solid var(--border); border-radius:28px; overflow:hidden; box-shadow:var(--shadow); transition:var(--transition); } .study-library .study-card:hover{ transform:translateY(-10px); box-shadow:0 24px 50px rgba(0,0,0,.12); } .study-library .study-card img{ width:100%; height:240px; object-fit:cover; } .study-library .study-content{ display:flex; flex-direction:column; flex:1; padding:28px; } .study-library .study-content h3{ font-size:1.6rem; margin:18px 0 15px; } .study-library .study-content p{ flex:1; color:var(--light-text); line-height:1.8; margin-bottom:30px; } /* ========================================== STUDY STATS ========================================== */ .study-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-bottom:30px; } .study-stats div{ text-align:center; background:#F8FBFD; border-radius:16px; padding:16px 10px; } .study-stats strong{ display:block; font-size:1.35rem; color:var(--blue); margin-bottom:6px; } .study-stats span{ font-size:.85rem; color:var(--light-text); } /* ========================================== STUDY BUTTON ========================================== */ .study-button{ display:flex; align-items:center; justify-content:center; width:100%; padding:16px; border-radius:14px; background:var(--blue); color:#FFFFFF; font-weight:700; transition:var(--transition); } .study-button:hover{ background:var(--green); } /* ========================================== SITE STATS ========================================== */ .stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; max-width:1400px; margin:110px auto; padding:0 32px; } .stat-card{ background:#FFFFFF; text-align:center; padding:45px 25px; border-radius:24px; border:1px solid var(--border); box-shadow:var(--shadow); } .stat-card h2{ font-size:3rem; color:var(--green); margin-bottom:10px; } .stat-card p{ color:var(--light-text); font-weight:600; } /* ========================================== CUSTOM STUDY SECTION ========================================== */ .featured-study:last-of-type{ background:#F4F9FF; } .featured-study:last-of-type .featured-study-card{ background:#FFFFFF; } .featured-study:last-of-type .featured-label{ background:#E8F8EC; color:var(--green); } /* ========================================== RESPONSIVE ========================================== */ @media (max-width:1200px){ .study-library .study-grid{ grid-template-columns:repeat(2,1fr); } .stats-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:992px){ .featured-study-card{ grid-template-columns:1fr; text-align:center; } .featured-highlights{ grid-template-columns:1fr; } .study-library .study-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:768px){ .hero-search{ flex-direction:column; border-radius:24px; } .hero-search button{ width:100%; height:60px; } .study-library .study-grid{ grid-template-columns:1fr; } .study-stats{ grid-template-columns:1fr; } .stats-grid{ grid-template-columns:1fr; } .filter-buttons{ flex-direction:column; } .filter-buttons button, .filter-btn{ width:100%; } } /* ========================================== AGE PAGE ========================================== */ .age-hero{ padding:100px 0; background:linear-gradient( 135deg, #EAF7FD 0%, #F7FCFF 100% ); } .age-hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:center; } .age-hero h1{ font-size:clamp(3rem,5vw,4.5rem); margin-bottom:25px; } .age-hero p{ font-size:1.15rem; line-height:1.9; color:var(--light-text); margin-bottom:40px; } .age-hero-image img{ width:100%; max-width:600px; margin:auto; border-radius:30px; box-shadow:0 20px 60px rgba(0,0,0,.12); } /* ========================================== QUICK FACTS ========================================== */ .quick-facts{ padding:90px 0; background:#FFFFFF; } .facts-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .fact-card{ background:#FFFFFF; text-align:center; padding:40px 30px; border-radius:24px; border:1px solid var(--border); box-shadow:var(--shadow); } .fact-card h3{ font-size:2.2rem; color:var(--blue); margin-bottom:12px; } .fact-card p{ color:var(--light-text); } /* ========================================== DEVELOPMENT DOMAINS ========================================== */ .development-section{ padding:110px 0; background:#F8FBFD; } .development-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; } .development-card{ background:#FFFFFF; border-radius:26px; padding:40px; text-align:center; border:1px solid var(--border); box-shadow:var(--shadow); transition:.3s; } .development-card:hover{ transform:translateY(-8px); } .development-icon{ font-size:3.5rem; margin-bottom:20px; } .development-card h3{ margin-bottom:15px; } .development-card p{ color:var(--light-text); line-height:1.8; } /* ========================================== FEATURED ACTIVITIES ========================================== */ .activities-section{ padding:110px 0; background:#FFFFFF; } .activities-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:35px; } .activity-item{ background:#FFFFFF; border-radius:28px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); transition:.3s; } .activity-item:hover{ transform:translateY(-8px); } .activity-item img{ width:100%; aspect-ratio:1/1; object-fit:cover; } .activity-content{ padding:30px; } .activity-content h3{ margin-bottom:15px; } .activity-content p{ color:var(--light-text); line-height:1.8; margin-bottom:25px; } /* ========================================== LEARNING CENTERS ========================================== */ .centers-section{ padding:110px 0; background:#FFFBEA; } .centers-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:25px; } .center-card{ background:#FFFFFF; border-radius:22px; padding:35px; text-align:center; border:1px solid var(--border); box-shadow:var(--shadow); transition:.3s; } .center-card:hover{ transform:translateY(-8px); } .center-card span{ display:block; font-size:3rem; margin-bottom:18px; } /* ========================================== TEACHER RESOURCES ========================================== */ .teacher-resources{ padding:110px 0; background:#FFFFFF; } .resources-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; } .resource-card{ background:#F8FBFD; border-radius:24px; padding:35px; border:1px solid var(--border); transition:.3s; } .resource-card:hover{ background:#FFFFFF; transform:translateY(-6px); } .resource-card h3{ margin-bottom:15px; } .resource-card p{ color:var(--light-text); line-height:1.8; } /* ========================================== RESPONSIVE ========================================== */ @media (max-width:1200px){ .facts-grid, .centers-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:992px){ .age-hero-grid{ grid-template-columns:1fr; text-align:center; } .development-grid, .activities-grid, .resources-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:768px){ .facts-grid, .development-grid, .activities-grid, .centers-grid, .resources-grid{ grid-template-columns:1fr; } } /* ========================================== MATERIALS ========================================== */ .materials-section{ padding:110px 0; background:#FFFFFF; } .materials-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .material-card{ background:#FFFFFF; border:1px solid var(--border); border-radius:24px; padding:40px 25px; text-align:center; font-size:1.15rem; font-weight:700; box-shadow:var(--shadow); transition:var(--transition); } .material-card:hover{ transform:translateY(-8px); border-color:var(--green); } /* ========================================== SAMPLE DAILY SCHEDULE ========================================== */ .study-weeks{ padding:110px 0; background:#F8FBFD; } .week-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; } .week-card{ background:#FFFFFF; padding:40px; border-radius:24px; border:1px solid var(--border); box-shadow:var(--shadow); } .week-number{ display:inline-block; background:var(--blue); color:#FFFFFF; padding:10px 18px; border-radius:999px; margin-bottom:20px; font-size:.9rem; font-weight:700; } .week-card h3{ margin-bottom:18px; } .week-card p{ color:var(--light-text); margin-bottom:25px; line-height:1.8; } .week-card ul{ padding-left:20px; list-style:disc; } .week-card li{ margin-bottom:10px; color:var(--light-text); } /* ========================================== CLASSROOM INTEREST AREAS ========================================== */ #centers{ padding:110px 0; background:#FFFBEA; } .center-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .center-card{ display:flex; flex-direction:column; align-items:center; text-align:center; background:#FFFFFF; padding:40px 30px; border-radius:24px; border:1px solid var(--border); box-shadow:var(--shadow); transition:var(--transition); } .center-card:hover{ transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,.10); } .center-card{ font-size:3rem; } .center-card h3{ font-size:1.5rem; margin:20px 0 15px; color:var(--text); } .center-card p{ font-size:1rem; line-height:1.8; color:var(--light-text); } /* ========================================== POPULAR CURRICULUM STUDIES ========================================== */ .books-section{ padding:110px 0; background:#FFFFFF; } .books-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .book-card{ display:flex; flex-direction:column; align-items:center; text-align:center; background:#FFFFFF; padding:35px 28px; min-height:360px; border-radius:28px; border:1px solid var(--border); box-shadow:var(--shadow); transition:var(--transition); } .book-card:hover{ transform:translateY(-8px); box-shadow:0 20px 45px rgba(0,0,0,.12); } /* Emoji/Icon */ .book-card > :first-child{ font-size:3rem; line-height:1; margin-bottom:20px; } /* Title */ .book-card h3{ font-size:1.55rem; margin-bottom:15px; color:var(--text); } /* Description */ .book-card p{ flex:1; font-size:.95rem; line-height:1.7; color:var(--light-text); margin-bottom:28px; max-width:240px; } /* Button */ .book-card .study-button{ width:100%; padding:14px 20px; border-radius:50px; font-size:.95rem; } /* Responsive */ @media(max-width:1200px){ .books-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .books-grid{ grid-template-columns:1fr; } .book-card{ min-height:auto; } } /* ========================================== DEVELOPMENTAL MILESTONES ========================================== */ #assessment{ padding:110px 0; background:#F8FBFD; } .assessment-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; } .assessment-card{ background:#FFFFFF; padding:28px; border-radius:20px; border:1px solid var(--border); box-shadow:var(--shadow); font-size:1.05rem; line-height:1.8; transition:var(--transition); } .assessment-card:hover{ transform:translateY(-6px); border-color:var(--green); } /* ========================================== ABOUT • TEACHING PHILOSOPHY ========================================== */ .study-dashboard{ padding:110px 0; background:#FFFFFF; } .study-dashboard .dashboard-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; } .study-dashboard .dashboard-card{ background:#F8FBFD; border:1px solid var(--border); border-radius:24px; padding:36px 30px; text-align:center; box-shadow:var(--shadow); transition:var(--transition); } .study-dashboard .dashboard-card:hover{ transform:translateY(-8px); } .study-dashboard .dashboard-card{ font-size:3rem; line-height:1; } .study-dashboard .dashboard-card h3{ margin:22px 0 14px; font-size:1.4rem; font-weight:700; color:var(--text); } .study-dashboard .dashboard-card p{ font-size:1rem; line-height:1.8; color:var(--light-text); margin:0; } .dashboard-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .dashboard-card{ background:#F8FBFD; border:1px solid var(--border); border-radius:24px; padding:40px 25px; text-align:center; transition:var(--transition); box-shadow:var(--shadow); } .dashboard-card:hover{ transform:translateY(-8px); background:#FFFFFF; } .dashboard-card{ font-size:3rem; } .dashboard-card h3{ margin-top:20px; font-size:1.35rem; } /* ========================================== PRINTABLES ========================================== */ #downloads{ padding:110px 0; background:#EEFDF6; } .download-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; } .download-card{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:220px; background:#FFFFFF; border-radius:24px; border:1px solid var(--border); box-shadow:var(--shadow); font-size:1.3rem; font-weight:700; transition:var(--transition); padding:35px; } .download-card:hover{ transform:translateY(-8px); color:var(--blue); } /* ========================================== AGE NAVIGATION ========================================== */ .week-navigation{ padding:80px 0; background:#FFFFFF; } .week-nav-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; } .week-nav-card{ display:flex; align-items:center; justify-content:center; min-height:120px; background:#F8FBFD; border:1px solid var(--border); border-radius:24px; font-size:1.25rem; font-weight:700; transition:var(--transition); } .week-nav-card:hover{ background:var(--blue); color:#FFFFFF; } .week-nav-card.next{ background:var(--green); color:#FFFFFF; } /* ========================================== FAMILY ENGAGEMENT ========================================== */ #family{ padding:110px 0; background:#FFF8EF; } .family-card{ max-width:950px; margin:auto; background:#FFFFFF; border-radius:30px; padding:70px; text-align:center; border:1px solid var(--border); box-shadow:var(--shadow); } .family-card h3{ font-size:2.5rem; margin-bottom:25px; } .family-card p{ color:var(--light-text); line-height:1.9; margin-bottom:40px; } /* ========================================== AGE PAGE RESPONSIVE ========================================== */ @media (max-width:1200px){ .materials-grid, .center-grid, .books-grid, .dashboard-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:992px){ .week-grid{ grid-template-columns:1fr; } .assessment-grid{ grid-template-columns:1fr; } .download-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:768px){ .materials-grid, .center-grid, .books-grid, .dashboard-grid, .download-grid{ grid-template-columns:1fr; } .week-nav-grid{ grid-template-columns:1fr; } .family-card{ padding:40px 30px; } } /* ========================================== CONTACT PAGE ========================================== */ .contact-info{ padding:110px 0; background:#FFFFFF; } .contact-info .favorite-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:40px; } .contact-info .favorite-card{ display:flex; flex-direction:column; justify-content:flex-start; text-align:center; padding:40px 32px; min-height:300px; border-radius:26px; background:#FFFFFF; border:1px solid var(--border); box-shadow:var(--shadow); transition:var(--transition); } .contact-info .favorite-card:hover{ transform:translateY(-8px); } .contact-info .favorite-icon{ font-size:3rem; margin-bottom:20px; } .contact-info h3{ font-size:1.5rem; margin-bottom:16px; } .contact-info p{ color:var(--light-text); line-height:1.8; } /* ========================================== CONTACT PAGE ========================================== */ /* Hero */ .study-hero{ padding:120px 0 90px; text-align:center; background:linear-gradient(135deg,#F6FBFF,#EDF8FF); } .study-hero h1{ font-size:clamp(2.8rem,5vw,4.2rem); margin:25px 0; } .study-hero p{ max-width:850px; margin:auto; font-size:1.15rem; line-height:1.9; color:var(--light-text); } /* ========================================== CONTACT INFORMATION ========================================== */ .teacher-favorites{ padding:110px 0; background:#FFFFFF; } .teacher-favorites .favorite-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:40px; } .teacher-favorites>.container>.favorite-card{ max-width:900px; margin:0 auto 50px; text-align:center; } .teacher-favorites .favorite-card{ display:flex; flex-direction:column; justify-content:flex-start; align-items:center; padding:40px 30px; min-height:270px; background:#FFFFFF; border-radius:26px; border:1px solid var(--border); box-shadow:var(--shadow); transition:var(--transition); } .teacher-favorites .favorite-card:hover{ transform:translateY(-8px); } .teacher-favorites .favorite-icon{ font-size:3rem; margin-bottom:20px; } .teacher-favorites h3{ font-size:1.5rem; margin-bottom:15px; } .teacher-favorites p{ line-height:1.8; color:var(--light-text); } /* ========================================== CONTACT FORM ========================================== */ .featured-study{ padding:110px 0; background:#F8FBFD; } .contact-form{ display:flex; flex-direction:column; gap:22px; } .contact-form .input-group{ display:flex; align-items:center; border:1px solid var(--border); border-radius:16px; overflow:hidden; background:#FFFFFF; } .contact-form .input-icon{ width:65px; text-align:center; font-size:1.3rem; color:var(--blue); } .contact-form input{ flex:1; border:none; padding:18px 20px; font-size:1rem; background:none; } .contact-form textarea{ width:100%; border:1px solid var(--border); border-radius:16px; padding:20px; min-height:180px; resize:vertical; font:inherit; } .contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--blue); } .contact-form button{ width:220px; } /* ========================================== FAQ ========================================== */ .new-activities{ padding:110px 0; background:#FFFFFF; } .new-activities .activity-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; } .new-activities .activity-card{ min-height:260px; padding:35px; } .new-activities h3{ margin-bottom:18px; } .new-activities p{ line-height:1.8; } /* ========================================== COLLABORATION ========================================== */ .why-section{ padding:80px 0; background:#FFF9ED; } .why-section .why-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:28px; } .why-section .why-card{ min-height:260px; } .why-section .why-icon{ font-size:3rem; } /* ========================================== SOCIAL ========================================== */ .interest-areas{ padding:110px 0; background:#FFFFFF; } .interest-areas .interest-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .interest-areas .interest-card{ min-height:260px; } /* ========================================== RESPONSIVE ========================================== */ @media (max-width:1200px){ .teacher-favorites .favorite-grid{ grid-template-columns:repeat(2,1fr); } .why-section .why-grid{ grid-template-columns:repeat(3,1fr); } .interest-areas .interest-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:768px){ .teacher-favorites .favorite-grid, .new-activities .activity-grid, .why-section .why-grid, .interest-areas .interest-grid{ grid-template-columns:1fr; } .contact-form button{ width:100%; } } /* ========================================== LIBRARY PAGE ========================================== */ /* ========================================== LIBRARY HERO ========================================== */ .library-page .study-hero, .study-hero{ padding:120px 0 100px; background: linear-gradient( 135deg, #F8FCFF, #EEF8F2 ); text-align:center; } .study-hero .breadcrumb{ display:flex; justify-content:center; gap:10px; margin-bottom:30px; font-size:.95rem; } .study-hero h1{ max-width:1000px; margin:0 auto 20px; font-size:clamp(2.8rem,5vw,4.5rem); } .hero-subtitle{ font-size:1.6rem; color:var(--blue); margin-bottom:25px; } .study-hero p{ max-width:950px; margin:auto; line-height:1.9; color:var(--light-text); } /* ========================================== LIBRARY SEARCH ========================================== */ .hero-search{ display:flex; max-width:700px; margin:45px auto 0; overflow:hidden; border-radius:999px; background:#FFFFFF; border:2px solid var(--border); box-shadow:var(--shadow); } .hero-search input{ flex:1; padding:18px 25px; border:none; outline:none; font-size:1rem; } .hero-search button{ min-width:130px; border:none; background:var(--blue); color:#FFFFFF; font-weight:700; cursor:pointer; transition:.3s ease; } .hero-search button:hover{ background:var(--green); } /* ========================================== POPULAR SEARCH TAGS ========================================== */ .hero-tags{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:30px; } .hero-tags a{ background:white; padding:10px 18px; border-radius:50px; box-shadow:0 8px 20px rgba(0,0,0,.08); font-weight:600; transition:.25s; } .hero-tags a:hover{ transform:translateY(-4px); } /* ========================================== LIBRARY COLLECTION GRID ========================================== */ .interest-areas .interest-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .interest-areas .interest-card{ min-height:340px; padding:35px 30px; display:flex; flex-direction:column; text-align:center; } .interest-areas .interest-icon{ font-size:3rem; margin-bottom:20px; } .interest-areas .interest-card h3{ font-size:1.35rem; margin-bottom:15px; } .interest-areas .interest-card p{ font-size:.98rem; line-height:1.8; } /* ========================================== FEATURED COLLECTIONS ========================================== */ .featured-studies{ padding:110px 0; background:#F8FBFD; } .featured-studies .study-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:35px; } .featured-studies .study-card{ overflow:hidden; } /* ========================================== FEATURED STUDIES SQUARE IMAGES FIX ========================================== */ .featured-studies .study-card img{ width:100%; aspect-ratio:1 / 1; height:auto; object-fit:cover; display:block; } .featured-studies .study-card{ display:flex; flex-direction:column; overflow:hidden; } .featured-studies .study-content{ flex:1; } /* ========================================== POPULAR RESOURCES ========================================== */ .teacher-favorites{ padding:110px 0; } .teacher-favorites .favorite-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .teacher-favorites .favorite-card{ min-height:280px; padding:35px 25px; text-align:center; } .favorite-icon{ font-size:2.8rem; margin-bottom:20px; } /* ========================================== NEW ARRIVALS ========================================== */ .new-activities{ padding:110px 0; background:#FFFBEA; } .new-activities .activity-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; } .activity-link{ display:inline-block; margin-top:20px; font-weight:700; color:var(--blue); } /* ========================================== LIBRARY NUMBERS ========================================== */ .why-section{ padding:110px 0; background:#FFFFFF; } .why-section .why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .why-section .why-card{ min-height:330px; text-align:center; } .why-card h2{ font-size:2.8rem; color:var(--blue); margin:15px 0; } /* ========================================== MEMBER SECTION ========================================== */ .newsletter{ padding:120px 0; } .custom-resource-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:25px 0; } .custom-resource-list li{ list-style:none; background:#F8FBFD; padding:10px 15px; border-radius:12px; } /* ========================================== RESPONSIVE ========================================== */ @media(max-width:1200px){ .interest-areas .interest-grid, .teacher-favorites .favorite-grid{ grid-template-columns:repeat(3,1fr); } .why-section .why-grid{ grid-template-columns:repeat(3,1fr); } } @media(max-width:900px){ .featured-studies .study-grid, .new-activities .activity-grid{ grid-template-columns:repeat(2,1fr); } .interest-areas .interest-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:650px){ .hero-search{ flex-direction:column; } .hero-search input, .hero-search button{ border-radius:50px; width:100%; min-height:55px; } .featured-studies .study-grid, .interest-areas .interest-grid, .teacher-favorites .favorite-grid, .new-activities .activity-grid, .why-section .why-grid{ grid-template-columns:1fr; } .custom-resource-list{ grid-template-columns:1fr; } } /* ========================================== LIBRARY MEMBERSHIP ========================================== */ .library-membership{ padding:120px 0; background: linear-gradient( 135deg, #EEF8FF, #F3FFF6 ); } .membership-wrapper{ display:grid; grid-template-columns:1.2fr .8fr; gap:60px; align-items:center; } .membership-tag{ display:inline-block; padding:10px 20px; border-radius:999px; background:#FFFFFF; color:var(--blue); font-weight:700; margin-bottom:25px; } .membership-content h2{ font-size:3rem; margin-bottom:25px; } .membership-content p{ max-width:650px; font-size:1.15rem; line-height:1.9; color:var(--light-text); } .membership-benefits{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:35px; } .membership-benefits div{ background:#FFFFFF; padding:16px 20px; border-radius:16px; font-weight:600; box-shadow:0 10px 25px rgba(0,0,0,.06); } .membership-card{ background:#FFFFFF; padding:50px 40px; border-radius:32px; text-align:center; box-shadow:0 25px 60px rgba(0,0,0,.12); } .membership-icon{ font-size:4rem; margin-bottom:20px; } .membership-card h3{ font-size:2rem; margin-bottom:15px; } .membership-card p{ color:var(--light-text); line-height:1.7; margin-bottom:30px; } .membership-card .input-group{ display:flex; align-items:center; border:1px solid var(--border); border-radius:50px; overflow:hidden; margin-bottom:20px; } .membership-card input{ flex:1; border:none; padding:18px; } .membership-card button{ width:100%; padding:16px; border:none; border-radius:50px; background:var(--blue); color:#FFFFFF; font-weight:700; cursor:pointer; } .membership-card small{ display:block; margin-top:20px; color:var(--light-text); } @media(max-width:900px){ .membership-wrapper{ grid-template-columns:1fr; } .membership-benefits{ grid-template-columns:1fr; } .membership-content h2{ font-size:2.3rem; } } /* ========================================== LITTLE EXPLORERS UNIVERSAL STAR MENU ========================================== */ .nav-container{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; } .mobile-menu{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; border:none; background:#FFFFFF; border-radius:50%; cursor:pointer; font-size:2rem; box-shadow:0 8px 20px rgba(0,0,0,.12); order:3; } .menu-star{ display:block; } .menu-close{ display:none; color:var(--blue); } .mobile-menu.active .menu-star{ display:none; } .mobile-menu.active .menu-close{ display:block; } /* NAV CLOSED */ nav{ display:none; } /* NAV OPEN */ nav.active{ display:block; position:absolute; top:92px; left:0; width:100%; background:#FFFFFF; padding:30px; box-shadow:var(--shadow); z-index:1500; } nav.active ul{ display:flex; flex-direction:column; align-items:center; gap:18px; } nav.active a{ padding:12px; } /* SEARCH */ .search-bar{ flex:1; } /* ALL DEVICES */ @media(max-width:1100px){ .search-bar{ order:4; flex-basis:100%; max-width:none; } } @media(max-width:768px){ .logo{ order:1; } .mobile-menu{ order:2; } .search-bar{ order:3; width:100%; } } /* ========================================== LITTLE EXPLORERS AGE PAGE FINAL OVERRIDES Applies to: early-head-start.html 2-3.html 3-4.html 4-5.html ========================================== */ /* ========================================== AGE PAGE SECTIONS ========================================== */ .age-hero, .quick-facts, .development-section, .materials-section, .study-weeks, #centers, .books-section, #assessment, .why-section, .study-dashboard, #downloads, .week-navigation, #family, .featured-study, .newsletter{ width:100%; } /* ========================================== SECTION TITLES ========================================== */ .age-hero .section-title, .quick-facts .section-title, .development-section .section-title, .materials-section .section-title, .study-weeks .section-title, .books-section .section-title{ max-width:850px; margin-left:auto; margin-right:auto; } /* ========================================== POPULAR CURRICULUM STUDIES ========================================== */ .books-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; } .book-card{ display:flex; flex-direction:column; justify-content:flex-start; align-items:center; text-align:center; background:#FFFFFF; min-height:360px; padding:35px 28px; border-radius:28px; border:1px solid var(--border); box-shadow:var(--shadow); transition:.3s ease; } .book-card:hover{ transform:translateY(-8px); } .book-card{ font-size:3rem; } .book-card h3{ font-size:1.5rem; line-height:1.25; margin:20px 0 15px; } .book-card p{ font-size:1rem; line-height:1.7; color:var(--light-text); max-width:250px; flex:1; } .book-card h3{ font-size:1.5rem; margin-bottom:15px; } .book-card p{ font-size:.95rem; line-height:1.75; color:var(--light-text); max-width:250px; flex:1; } .book-card .study-button{ margin-top:25px; width:100%; } /* ========================================== DEVELOPMENT CARDS ========================================== */ .development-grid{ grid-template-columns:repeat(3,1fr); } .development-card{ min-height:300px; } /* ========================================== ELOF DOMAIN CARDS ========================================== */ .materials-grid{ grid-template-columns:repeat(4,1fr); } .material-card{ min-height:220px; display:flex; align-items:center; justify-content:center; flex-direction:column; font-size:1.05rem; line-height:1.6; } /* ========================================== CLASSROOM CENTERS ========================================== */ .center-grid{ grid-template-columns:repeat(4,1fr); } .center-card{ min-height:300px; } /* ========================================== DAILY LEARNING DASHBOARD ========================================== */ .dashboard-grid{ grid-template-columns:repeat(4,1fr); } .dashboard-card{ min-height:220px; } /* ========================================== PRINTABLE RESOURCE CARDS ========================================== */ .download-grid{ grid-template-columns:repeat(3,1fr); } .download-card{ min-height:220px; font-size:1.05rem; } /* ========================================== FAMILY SECTION ========================================== */ .family-card{ max-width:950px; } /* ========================================== AGE PAGE RESPONSIVE ========================================== */ @media(max-width:1200px){ .books-grid, .materials-grid, .center-grid, .dashboard-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:992px){ .development-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .books-grid, .materials-grid, .center-grid, .dashboard-grid, .development-grid, .download-grid{ grid-template-columns:1fr; } .book-card{ min-height:auto; } .age-hero{ padding:70px 0; } .family-card{ padding:40px 25px; } } /* ========================================== PRE KINDERGARTEN PAGE FINAL OVERRIDES ========================================== */ /* ========================================== PRE-K HERO ========================================== */ .study-banner{ padding:100px 0; background: linear-gradient( 135deg, #EEF8FF, #F4FFF3 ); } .study-banner-grid{ display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:70px; } .study-banner h1{ font-size:clamp(3rem,5vw,4.5rem); margin:20px 0; } .study-banner p{ color:var(--light-text); font-size:1.15rem; line-height:1.9; margin-bottom:35px; } .study-label{ display:inline-block; background:#EAF7FD; color:var(--blue); padding:10px 22px; border-radius:999px; font-weight:700; } .study-banner img{ width:100%; border-radius:32px; box-shadow:var(--shadow); } /* ========================================== LEARNING FOCUS CARDS ========================================== */ .study-dashboard{ padding:110px 0; } .study-dashboard > .container > h2{ text-align:center; font-size:2.8rem; margin-bottom:15px; } .study-dashboard > .container > p{ max-width:750px; text-align:center; margin:0 auto 60px; color:var(--light-text); } .study-dashboard .dashboard-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; } .study-dashboard .dashboard-card{ min-height:220px; background:white; border-radius:28px; border:1px solid var(--border); box-shadow:var(--shadow); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; font-size:3rem; transition:.3s ease; } .study-dashboard .dashboard-card:hover{ transform:translateY(-8px); } .study-dashboard .dashboard-card h3{ margin-top:20px; font-size:1.35rem; } /* ========================================== PRE-K STUDY CARDS ========================================== */ .study-library{ padding:110px 0; background:#F8FBFD; } .study-library .study-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:35px; } .study-library .study-card{ background:white; border-radius:28px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); } .study-library .study-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; } .study-library .study-content{ padding:30px; } .study-library .study-content h3{ font-size:1.6rem; margin:18px 0; } .study-library .study-content p{ font-size:.95rem; line-height:1.8; color:var(--light-text); } .study-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:25px 0; } .study-stats div{ background:#F8FBFD; padding:15px 8px; border-radius:15px; text-align:center; } .study-stats strong{ display:block; color:var(--blue); } /* ========================================== KINDERGARTEN READINESS ========================================== */ .materials-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .material-card{ min-height:180px; display:flex; align-items:center; justify-content:center; text-align:center; padding:30px; font-size:1.1rem; background:white; border-radius:24px; box-shadow:var(--shadow); border:1px solid var(--border); } /* ========================================== POPULAR BOOKS ========================================== */ .books-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .book-card{ min-height:330px; padding:35px 25px; display:flex; flex-direction:column; align-items:center; text-align:center; background:white; border-radius:28px; border:1px solid var(--border); box-shadow:var(--shadow); } .book-card:first-letter{ font-size:1rem; } .book-card h3{ font-size:1.35rem; margin:20px 0; } .book-card p{ font-size:.95rem; color:var(--light-text); line-height:1.7; } /* ========================================== PRE-K RESPONSIVE ========================================== */ @media(max-width:1200px){ .study-library .study-grid, .books-grid, .materials-grid{ grid-template-columns:repeat(2,1fr); } .study-dashboard .dashboard-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .study-banner-grid{ grid-template-columns:1fr; text-align:center; } .study-library .study-grid, .books-grid, .materials-grid, .study-dashboard .dashboard-grid{ grid-template-columns:1fr; } .study-banner{ padding:70px 0; } } /* ========================================== NEWSLETTER FINAL DESIGN ========================================== */ .newsletter{ padding:110px 0; background:linear-gradient( 135deg, var(--blue), var(--green) ); } .newsletter-box{ display:grid; grid-template-columns:1.3fr .7fr; gap:60px; align-items:center; background:#FFFFFF; padding:60px; border-radius:32px; box-shadow:var(--shadow); } .newsletter-content h2{ font-size:2.5rem; margin-bottom:20px; } .newsletter-content p{ color:var(--light-text); line-height:1.8; } .newsletter-benefits{ display:grid; grid-template-columns:repeat(2,1fr); gap:15px; margin-top:25px; } .newsletter-benefits li{ background:#F8FBFD; padding:12px 18px; border-radius:14px; font-weight:600; } .newsletter-form input{ height:58px; width:100%; border:2px solid var(--border); border-radius:18px; padding:0 20px; font-size:1rem; margin-bottom:15px; } .newsletter-form button{ height:58px; width:100%; border:none; border-radius:18px; background:var(--blue); color:#FFFFFF; font-weight:700; font-size:1rem; cursor:pointer; } .newsletter-form button:hover{ background:var(--green); } @media(max-width:900px){ .newsletter-box{ grid-template-columns:1fr; padding:40px 25px; } .newsletter-benefits{ grid-template-columns:1fr; } } /* ========================================== FINAL BUTTON CONSISTENCY FIX ========================================== */ .hero-buttons{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:20px; margin-top:35px; } .btn{ display:inline-flex; align-items:center; justify-content:center; min-width:220px; height:58px; padding:0 35px; border-radius:999px; font-size:1rem; font-weight:700; text-align:center; transition:.3s ease; cursor:pointer; } .btn-primary{ background:var(--blue); color:#FFFFFF; border:2px solid var(--blue); } .btn-primary:hover{ background:var(--green); border-color:var(--green); color:#FFFFFF; transform:translateY(-4px); } .btn-secondary{ background:#FFFFFF; color:var(--text); border:2px solid var(--border); } .btn-secondary:hover{ background:var(--green); color:#FFFFFF; border-color:var(--green); transform:translateY(-4px); } /* Newsletter buttons */ .newsletter .hero-buttons{ justify-content:flex-start; } @media(max-width:768px){ .hero-buttons{ flex-direction:column; width:100%; } .hero-buttons .btn{ width:100%; min-width:0; } } /* ========================================== CARD HEIGHT FIX Allows content to grow naturally ========================================== */ .favorite-card, .why-card, .dashboard-card{ height:auto; min-height:320px; display:flex; flex-direction:column; justify-content:flex-start; } .favorite-card p, .why-card p, .dashboard-card p{ flex:1; } .favorite-card h3, .why-card h3, .dashboard-card h3{ margin-bottom:15px; } /* Longer content cards */ .favorite-card, .why-card{ padding:40px 32px; } /* About page library cards */ .featured-studies .favorite-card{ min-height:240px; justify-content:center; } /* Teaching philosophy cards */ .study-dashboard .dashboard-card{ min-height:330px; padding:40px 30px; } /* Mobile */ @media(max-width:768px){ .favorite-card, .why-card, .dashboard-card{ min-height:auto; } } /* ========================================== FINAL CLEANUP OVERRIDES DO NOT DELETE ABOVE YET ========================================== */ /* ========================================== FINAL BUTTON SYSTEM OVERRIDE STEP 3 CLEANUP ========================================== */ /* Universal Button Base */ .btn, .study-button, .filter-btn, .newsletter-form button, .membership-card button{ display:inline-flex; align-items:center; justify-content:center; font-family:"Inter",sans-serif; font-weight:700; cursor:pointer; transition:var(--transition); } /* Primary Buttons */ .btn-primary, .study-button, .newsletter-form button, .membership-card button{ background:var(--blue); color:#FFFFFF; border:none; } .btn-primary:hover, .study-button:hover, .newsletter-form button:hover, .membership-card button:hover{ background:var(--green); color:#FFFFFF; transform:translateY(-3px); } /* Secondary Buttons */ .btn-secondary{ background:#FFFFFF; color:var(--text); border:2px solid var(--border); } .btn-secondary:hover{ background:var(--green); border-color:var(--green); color:#FFFFFF; } /* Filter Buttons */ .filter-btn{ background:#FFFFFF; color:var(--text); border:2px solid var(--border); min-width:170px; height:52px; padding:0 26px; border-radius:999px; } .filter-btn:hover{ background:var(--green); border-color:var(--green); color:#FFFFFF; transform:translateY(-3px); } .filter-btn.active{ background:var(--blue); border-color:var(--blue); color:#FFFFFF; } /* ========================================== FINAL NEWSLETTER OVERRIDE STEP 4 CLEANUP ========================================== */ .newsletter{ padding:110px 0; background:linear-gradient( 135deg, var(--blue), var(--green) ); } .newsletter-box{ display:grid; grid-template-columns:1.4fr .9fr; gap:60px; align-items:center; background:#FFFFFF; padding:60px; border-radius:32px; box-shadow:var(--shadow); } .newsletter-card{ background:#F8FBFD; border-radius:24px; padding:40px; border:1px solid var(--border); } .newsletter-form button{ height:58px; border:none; border-radius:18px; background:var(--blue); color:#FFFFFF; font-weight:700; } .newsletter-form button:hover{ background:var(--green); } @media(max-width:992px){ .newsletter-box{ grid-template-columns:1fr; } } @media(max-width:768px){ .newsletter-box{ padding:35px 25px; } } /* ========================================== FINAL CARD HEIGHT FIX STEP 5 CLEANUP ========================================== */ .study-card, .book-card, .material-card, .center-card, .dashboard-card, .assessment-card{ height:auto; min-height:280px; } .study-content, .book-card, .material-card, .center-card, .dashboard-card{ display:flex; flex-direction:column; } .study-content p, .book-card p, .material-card p, .center-card p{ flex-grow:1; } @media(max-width:768px){ .study-card, .book-card, .material-card, .center-card, .dashboard-card, .assessment-card{ min-height:auto; } } /* ========================================== DEVELOPMENTAL MILESTONES FIX ========================================== */ .assessment-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; } .assessment-card{ min-height:auto; height:auto; padding:28px; display:flex; align-items:flex-start; justify-content:flex-start; } @media(max-width:768px){ .assessment-grid{ grid-template-columns:1fr; } } /* ========================================== ESSENTIAL QUESTIONS ========================================== */ .question-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:25px; } .question-card{ background:#FFFFFF; border:1px solid var(--border); border-radius:22px; padding:30px; box-shadow:var(--shadow); text-align:center; font-size:1.05rem; font-weight:600; line-height:1.7; color:var(--text); transition:var(--transition); } .question-card:hover{ transform:translateY(-6px); border-color:var(--green); } @media(max-width:992px){ .question-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .question-grid{ grid-template-columns:1fr; } } /* ========================================== BOOK CARD TYPOGRAPHY FIX ========================================== */ .book-card h3{ font-size:1.35rem; line-height:1.25; min-height:auto; } .book-card p{ font-size:1rem; line-height:1.7; } /* ========================================== SONGS & MOVEMENT ========================================== */ .songs-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .song-card{ background:#FFFFFF; border:1px solid var(--border); border-radius:24px; padding:35px 25px; text-align:center; box-shadow:var(--shadow); transition:var(--transition); } .song-card:hover{ transform:translateY(-8px); } .song-card h3{ font-size:1.35rem; margin:20px 0 15px; } .song-card p{ color:var(--light-text); line-height:1.7; } .song-card:first-child{ font-size:2rem; } @media(max-width:1200px){ .songs-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .songs-grid{ grid-template-columns:1fr; } } /* ========================================== 404 PAGE ========================================== */ .error-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:80px 0; background:linear-gradient( 135deg, #EEF8FF, #F4FFF3 ); } .error-card{ max-width:900px; width:100%; background:#FFFFFF; padding:70px; text-align:center; border-radius:32px; box-shadow:var(--shadow); } .error-icon{ font-size:4rem; margin-bottom:20px; } .error-card h1{ font-size:6rem; color:var(--blue); } .error-subtitle{ font-size:1.3rem; color:var(--green); font-weight:700; } .error-buttons{ display:flex; justify-content:center; gap:20px; margin:40px 0; } .popular-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .popular-grid a{ background:#F8FBFD; padding:20px; border-radius:18px; border:1px solid var(--border); font-weight:700; } @media(max-width:768px){ .error-card{ padding:40px 25px; } .popular-grid{ grid-template-columns:1fr; } } /* ========================================== SONGS & MOVEMENT ========================================== */ .songs-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .song-card{ background:#FFFFFF; border:1px solid var(--border); border-radius:24px; padding:35px 28px; text-align:center; box-shadow:var(--shadow); min-height:300px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; transition:var(--transition); } .song-card:hover{ transform:translateY(-8px); } .song-card:first-child{ font-size:1rem; } .song-card h3{ font-size:1.35rem; margin:20px 0 15px; color:var(--text); } .song-card p{ font-size:1rem; line-height:1.7; color:var(--light-text); max-width:250px; } @media(max-width:1200px){ .songs-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .songs-grid{ grid-template-columns:1fr; } } /* ========================================== SONG CARD FINAL TEXT FIX ========================================== */ .song-card p{ font-size:1rem !important; line-height:1.7; color:var(--light-text); max-width:250px; margin:0; } .song-card h3{ font-size:1.35rem !important; line-height:1.3; } .song-card{ font-size:1rem; } @media(max-width:768px){ .newsletter-box{ padding:35px 25px; } .newsletter-content h2{ font-size:2rem; } } /* ========================================== UNIVERSAL NEWSLETTER / COMMUNITY SECTION ========================================== */ .newsletter{ padding:120px 0; background: linear-gradient( 135deg, var(--blue), var(--green) ); } .newsletter-box{ display:grid; grid-template-columns:1.3fr .7fr; gap:60px; align-items:center; background:#FFFFFF; padding:60px; border-radius:32px; box-shadow:var(--shadow); } .newsletter-content h2{ font-size:2.8rem; line-height:1.2; margin-bottom:25px; } .newsletter-benefits{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } .newsletter-benefits div{ background:#F8FBFD; padding:14px 18px; border-radius:14px; font-weight:700; } .newsletter-card{ background:#F8FBFD; padding:40px; border-radius:26px; border:1px solid var(--border); } @media(max-width:992px){ .newsletter-box{ grid-template-columns:1fr; } } @media(max-width:768px){ .newsletter-benefits{ grid-template-columns:1fr; } .newsletter-box{ padding:35px 25px; } } .activities-hero{ min-height:520px; background: linear-gradient( rgba(0,80,120,.55), rgba(0,80,120,.55) ), url("images/activity-banner.jpg"); background-size:cover; background-position:center; display:flex; align-items:center; } .activity-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:30px; } .activity-card{ background:white; border-radius:20px; overflow:hidden; box-shadow: 0 15px 35px rgba(0,0,0,.12); } .activity-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; } .card-content{ padding:25px; } .domain-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:25px; } .domain-card{ padding:30px; border-radius:18px; background:#f7fafc; text-align:center; } /* ========================================== SCIENCE & STEM DISCOVERY TEXT FIX ========================================== */ .interest-section .interest-card h3{ color:var(--text); } .interest-section .interest-card p{ color:var(--light-text); } /* ========================================== STEM CHALLENGES ========================================== */ .challenge-section{ padding:110px 0; background:#FFFBEA; } .challenge-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; } .challenge-card{ background:#FFFFFF; border-radius:28px; padding:40px 30px; text-align:center; border:1px solid var(--border); box-shadow:var(--shadow); transition:var(--transition); } .challenge-card:hover{ transform:translateY(-8px); } .challenge-icon{ font-size:3.5rem; margin-bottom:22px; } .challenge-card h3{ font-size:1.5rem; margin-bottom:15px; color:var(--text); } .challenge-card p{ color:var(--light-text); line-height:1.8; } /* ========================================== STEM CHALLENGE RESPONSIVE ========================================== */ @media(max-width:1200px){ .challenge-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .challenge-grid{ grid-template-columns:1fr; } } /* ========================================== WEEKLY CURRICULUM PAGES ========================================== */ .week-banner{ padding:100px 0; background: linear-gradient( 135deg, #EEF8FF, #F4FFF3 ); text-align:center; } .week-banner h1{ font-size:clamp(3rem,5vw,4.5rem); margin:25px 0; } .week-banner p{ max-width:800px; margin:auto; color:var(--light-text); font-size:1.15rem; line-height:1.9; } /* WEEK OVERVIEW */ .week-overview{ padding:100px 0; background:#FFFFFF; } .overview-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .overview-card{ background:#F8FBFD; padding:35px 25px; border-radius:24px; border:1px solid var(--border); box-shadow:var(--shadow); } .overview-card h3{ margin-bottom:15px; } /* DAILY SECTIONS */ .week-day{ padding:90px 0; } .day-header{ text-align:center; margin-bottom:50px; } .day-header h2{ font-size:3rem; margin:15px 0; } .daily-section{ margin-bottom:30px; } .daily-card{ background:#FFFFFF; border-radius:26px; border:1px solid var(--border); box-shadow:var(--shadow); padding:35px; } .daily-title{ font-family:"Nunito",sans-serif; font-size:1.35rem; font-weight:800; color:var(--green); margin-bottom:20px; } /* MATERIALS */ .materials{ margin-top:25px; background:#F4FFF3; padding:20px; border-radius:18px; } .materials ul{ list-style:disc; padding-left:25px; } /* INTEREST AREAS */ .center-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:25px; } .center-list div{ background:#F8FBFD; padding:25px; border-radius:20px; } /* WEEK SUMMARY */ .week-summary{ padding:110px 0; background:#FFFBEA; } .summary-card{ background:white; padding:60px; border-radius:32px; box-shadow:var(--shadow); } .summary-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:40px; } /* RESPONSIVE */ @media(max-width:1000px){ .overview-grid, .summary-grid, .center-list{ grid-template-columns:1fr 1fr; } } @media(max-width:700px){ .overview-grid, .summary-grid, .center-list{ grid-template-columns:1fr; } .daily-card{ padding:25px; } } /* ========================================== WEEKLY STUDY PAGES LITTLE EXPLORERS LEARNING HUB ========================================== */ /* WEEK HERO */ .week-banner { padding:120px 0 100px; background: linear-gradient( 135deg, #EEF8FF, #F4FFF3 ); text-align:center; } .week-banner .eyebrow { font-family:"Nunito", sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:var(--green); margin-bottom:20px; } .week-banner h1 { font-size:clamp(3rem,6vw,5rem); margin-bottom:25px; color:var(--dark-text); } .week-banner p { max-width:850px; margin:auto; font-size:1.2rem; line-height:1.8; color:var(--light-text); } /* WEEK OVERVIEW */ .week-overview { padding:100px 0; background:white; } .overview-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .overview-card { background:#F8FBFD; padding:35px; border-radius:24px; border:1px solid var(--border); box-shadow:var(--shadow); } .overview-card h3 { font-family:"Nunito",sans-serif; font-size:1.3rem; font-weight:800; margin-bottom:15px; color:var(--green); } .overview-card p { line-height:1.7; } /* DAILY WEEK SECTIONS */ .week-day { padding:90px 0; } .week-day:nth-child(even) { background:#FAFCF7; } .day-header { text-align:center; margin-bottom:45px; } .day-header h2 { font-size:2.8rem; margin-bottom:15px; } .day-header p { font-size:1.15rem; color:var(--light-text); } /* DAILY ACTIVITY CARDS */ .daily-card { background:white; padding:45px; border-radius:28px; border:1px solid var(--border); box-shadow:var(--shadow); margin-bottom:30px; } .daily-title { font-family:"Nunito",sans-serif; font-weight:800; font-size:1.35rem; color:var(--green); margin-top:25px; margin-bottom:15px; } .daily-card p { font-size:1.05rem; line-height:1.8; } /* MATERIALS BOX */ .materials { background:#F4FFF3; padding:25px; border-radius:20px; margin-top:20px; } .materials ul { padding-left:25px; line-height:2; } /* WEEK SUMMARY */ .week-summary { padding:110px 0; background:#FFFBEA; } .summary-card { background:white; padding:60px; border-radius:32px; box-shadow:var(--shadow); text-align:center; } .summary-card h2 { margin-bottom:45px; } .summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; } .summary-grid div { padding:30px; background:#F8FBFD; border-radius:20px; } .summary-grid h3 { color:var(--green); font-family:"Nunito",sans-serif; font-weight:800; margin-bottom:15px; } /* RESPONSIVE */ @media(max-width:1000px){ .overview-grid { grid-template-columns:repeat(2,1fr); } .summary-grid { grid-template-columns:1fr; } } @media(max-width:700px){ .week-banner { padding:90px 20px; } .week-day { padding:60px 20px; } .overview-grid { grid-template-columns:1fr; } .daily-card { padding:30px; } .summary-card { padding:35px 20px; } } /* ========================================== TREES STUDY WEEK PAGES ========================================== */ /* WEEK BANNER */ .week-banner{ padding:110px 0; text-align:center; background: linear-gradient( 135deg, #EEF8FF, #F3FFF0 ); } .week-banner .eyebrow{ background:#E8F7E1; color:var(--green); } .week-banner h1{ font-size:clamp(3rem,5vw,4.5rem); margin:20px 0; } .week-banner p{ max-width:850px; margin:0 auto; color:var(--light-text); font-size:1.15rem; line-height:1.9; } /* ========================================== WEEK OVERVIEW CARDS ========================================== */ .week-overview{ padding:90px 0; background:#FFFFFF; } .overview-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .overview-card{ background:#FFFFFF; border-radius:24px; padding:35px 30px; text-align:center; border:1px solid var(--border); box-shadow:var(--shadow); transition:.3s ease; } .overview-card:hover{ transform:translateY(-8px); } .overview-card h3{ color:var(--green); margin-bottom:15px; font-size:1.35rem; } .overview-card p{ color:var(--light-text); line-height:1.8; } /* ========================================== DAILY WEEK SECTIONS ========================================== */ .week-day{ padding:90px 0; background:#F8FBFD; } .week-day:nth-of-type(even){ background:#FFFFFF; } .day-header{ text-align:center; max-width:850px; margin:0 auto 45px; } .day-header h2{ font-size:2.4rem; margin-bottom:15px; } .day-header p{ color:var(--light-text); font-size:1.1rem; } /* DAILY ACTIVITY CARD */ .daily-card{ max-width:950px; margin:auto; background:#FFFFFF; padding:50px; border-radius:30px; border:1px solid var(--border); box-shadow:var(--shadow); } .daily-title{ color:var(--blue); font-size:1.35rem; margin:25px 0 12px; } .daily-card p{ color:var(--light-text); line-height:1.9; } /* MATERIAL LIST */ .materials{ background:#F8FBFD; padding:25px; border-radius:20px; margin-top:20px; } .materials ul{ list-style:disc; padding-left:25px; } .materials li{ margin-bottom:10px; color:var(--text); } /* ========================================== LEARNING SUMMARY ========================================== */ .week-summary{ padding:110px 0; background:#FFFBEA; } .summary-card{ background:#FFFFFF; border-radius:32px; padding:60px; box-shadow:var(--shadow); text-align:center; } .summary-card h2{ margin-bottom:45px; } .summary-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; } .summary-grid div{ background:#F8FBFD; padding:30px; border-radius:20px; } .summary-grid h3{ color:var(--green); margin-bottom:15px; } .summary-grid p{ color:var(--light-text); } /* ========================================== WEEK NAVIGATION ========================================== */ .week-navigation{ padding:70px 0; background:#FFFFFF; } .week-navigation .container{ display:flex; justify-content:space-between; gap:20px; } .week-navigation a{ padding:18px 35px; border-radius:50px; background:var(--blue); color:white; font-weight:700; transition:.3s; } .week-navigation a:hover{ background:var(--green); } /* ========================================== RESPONSIVE ========================================== */ @media(max-width:1200px){ .overview-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .overview-grid, .summary-grid{ grid-template-columns:1fr; } .daily-card{ padding:35px 25px; } .week-navigation .container{ flex-direction:column; } .week-navigation a{ text-align:center; } } /* ========================================== WHEELS STUDY PAGE Little Explorers Learning Hub ========================================== */ .quick-facts, .study-section, .vocabulary-section, .materials-section, .investigation-section, .centers-section, .weekly-plan, .resources-section, .printables-section, .family-section { padding:90px 0; } .section-header { text-align:center; max-width:850px; margin:0 auto 50px; } .section-label { display:block; font-size:14px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#4caf50; margin-bottom:15px; } .section-header h2 { font-family:Nunito, sans-serif; font-size:42px; color:#1b4332; margin-bottom:20px; } .section-header p { font-size:18px; line-height:1.7; } /* ========================== STATS ========================== */ .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:25px; } .stat-card { background:white; padding:35px; text-align:center; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.08); } .stat-card h3 { font-size:42px; font-family:Nunito,sans-serif; color:#4caf50; } /* ========================== FEATURE CARDS ========================== */ .card-grid, .learning-grid, .materials-grid, .investigation-grid, .interest-grid, .resource-grid, .printable-grid, .family-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; } .favorite-card, .material-card, .investigation-card, .interest-card, .resource-card, .printable-card, .family-card { background:white; padding:35px; border-radius:20px; box-shadow:0 10px 25px rgba(0,0,0,.08); } .favorite-card h3, .investigation-card h3, .interest-card h3, .resource-card h3, .printable-card h3, .family-card h3 { color:#1b4332; font-family:Nunito,sans-serif; margin-bottom:15px; } .icon { font-size:45px; margin-bottom:20px; } /* ========================== VOCABULARY ========================== */ .vocabulary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .vocabulary-grid div { background:#edf7ed; padding:20px; border-radius:15px; text-align:center; font-weight:700; color:#1b4332; } /* ========================== MATERIALS ========================== */ .material-card { text-align:center; font-size:40px; } .material-card p { font-size:18px; margin-top:15px; } /* ========================== WEEK CARDS ========================== */ .week-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:25px; } .week-card { background:white; padding:35px; border-radius:20px; box-shadow:0 10px 25px rgba(0,0,0,.08); } .week-card span { font-weight:800; color:#4caf50; } .week-card h3 { font-family:Nunito,sans-serif; margin:15px 0; } .week-card a { color:#4caf50; font-weight:700; text-decoration:none; } /* ========================== NEWSLETTER ========================== */ .newsletter { padding:80px 0; } .newsletter-box { background:white; padding:50px; border-radius:25px; box-shadow:0 10px 30px rgba(0,0,0,.08); text-align:center; } .newsletter-form { display:flex; justify-content:center; gap:15px; margin-top:30px; } .newsletter-form input { padding:16px 20px; border:1px solid #ddd; border-radius:10px; width:300px; } .newsletter-form button { padding:16px 30px; background:#4caf50; color:white; border:none; border-radius:10px; font-weight:700; } /* ========================== FOOTER FIX ========================== */ .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; align-items:start; } .footer-brand img { width:90px; } .footer-column { display:flex; flex-direction:column; } .footer-column h4 { color:#4caf50; margin-bottom:15px; } .footer-column a { color:white; text-decoration:none; margin-bottom:10px; } .footer-column a:hover { color:#8bc34a; } /* ========================== MOBILE ========================== */ @media(max-width:900px){ .stats-grid, .card-grid, .learning-grid, .materials-grid, .investigation-grid, .interest-grid, .resource-grid, .printable-grid, .family-grid, .week-grid { grid-template-columns:1fr; } .vocabulary-grid { grid-template-columns:repeat(2,1fr); } .newsletter-form { flex-direction:column; } .footer-grid { grid-template-columns:1fr; } } /* ========================================== FOOTER LOGO STYLE ========================================== */ .footer-logo { display:flex; align-items:center; justify-content:center; width:120px; height:120px; margin-bottom:20px; background:white; border-radius:50%; padding:12px; box-shadow:0 8px 25px rgba(0,0,0,.15); overflow:hidden; } .footer-logo img { width:100%; height:100%; object-fit:contain; border-radius:50%; } .footer-brand { display:flex; flex-direction:column; align-items:center; text-align:center; } .footer-brand p { max-width:280px; line-height:1.6; margin-top:15px; } /* ========================================== STUDIES PAGE SQUARE CARD STYLE ========================================== */ .study-library .study-card, .featured-studies .study-card { border-radius:0; } .study-library .study-card img, .featured-studies .study-card img { aspect-ratio:1 / 1; height:auto; object-fit:cover; border-radius:0; } .study-library .study-content, .featured-studies .study-content { padding:35px; } .study-library .study-card:hover, .featured-studies .study-card:hover { transform:translateY(-8px); } /* Square card buttons */ .study-button { border-radius:0; } /* ========================================== STUDY PAGE FINAL CARD FIXES ========================================== */ /* QUICK FACTS FOUR COLUMN LAYOUT */ .quick-facts .stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; max-width:1400px; margin:60px auto; padding:0 32px; } .quick-facts .stat-card{ min-height:190px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; background:#FFFFFF; border-radius:24px; border:1px solid var(--border); box-shadow:var(--shadow); } .quick-facts .stat-card h2{ font-size:3rem; color:var(--green); margin-bottom:12px; } .quick-facts .stat-card p{ color:var(--light-text); font-weight:700; } /* LEARNING CENTER CARDS */ .centers-section{ padding:110px 0; background:#FFFBEA; } .centers-section .interest-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; } .centers-section .interest-card{ min-height:260px; background:#FFFFFF; color:var(--text); border-radius:24px; padding:40px 30px; border:1px solid var(--border); box-shadow:var(--shadow); text-align:center; } .centers-section .interest-card h3{ color:var(--blue); margin-bottom:18px; } .centers-section .interest-card p{ color:var(--light-text); line-height:1.8; } .centers-section .interest-icon{ font-size:3rem; margin-bottom:20px; } /* FOOTER LOGO FIX */ .footer-logo img{ width:90px; height:90px; object-fit:contain; border-radius:50%; background:#FFFFFF; padding:8px; } /* MOBILE */ @media(max-width:900px){ .quick-facts .stats-grid{ grid-template-columns:1fr; } .centers-section .interest-grid{ grid-template-columns:1fr; } } /* ========================================== WHITE LEARNING CENTER CARDS TEXT FIX ========================================== */ .centers-section .interest-card{ background:#FFFFFF; color:var(--text); } .centers-section .interest-card h3{ color:var(--text); } .centers-section .interest-card p{ color:var(--light-text); } /* ========================================== STUDY LEARNING GOALS CARDS ========================================== */ .learning-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .learning-grid > div{ background:#FFFFFF; border:1px solid var(--border); border-radius:24px; padding:35px 30px; min-height:220px; box-shadow:var(--shadow); transition:var(--transition); } .learning-grid > div:hover{ transform:translateY(-8px); } .learning-grid h3{ font-size:1.35rem; margin-bottom:18px; color:var(--text); } .learning-grid p{ color:var(--light-text); line-height:1.8; } @media(max-width:1200px){ .learning-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .learning-grid{ grid-template-columns:1fr; } } /* ========================================== STUDY LEARNING GOALS CARDS FINAL FIX ========================================== */ .objectives-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; } .objectives-grid > div{ background:#FFFFFF; border:1px solid var(--border); border-radius:24px; padding:35px 30px; min-height:220px; box-shadow:var(--shadow); transition:var(--transition); } .objectives-grid > div:hover{ transform:translateY(-8px); } .objectives-grid h3{ font-size:1.35rem; margin-bottom:18px; color:var(--text); } .objectives-grid p{ color:var(--light-text); line-height:1.8; margin:0; } /* TABLET */ @media(max-width:1100px){ .objectives-grid{ grid-template-columns:repeat(2,1fr); } } /* MOBILE */ @media(max-width:700px){ .objectives-grid{ grid-template-columns:1fr; } } /* ========================================== FINAL STUDY HERO FIX Signs / Wheels / Bread / Boxes / Studies ========================================== */ .study-hero{ width:100%; padding:120px 0 100px; text-align:center; } .study-hero .container{ max-width:1000px; margin:auto; } .study-hero .breadcrumb{ justify-content:center; margin-bottom:35px; } .study-hero h1{ display:flex; justify-content:center; align-items:center; gap:18px; font-size:clamp(3rem,5vw,4.5rem); line-height:1.1; margin-bottom:30px; } .study-hero h1 span{ display:inline-flex; } .study-hero p{ max-width:850px; margin:0 auto 45px; font-size:1.15rem; line-height:1.9; color:var(--light-text); } .study-hero .hero-buttons{ display:flex; justify-content:center; align-items:center; gap:20px; } .study-hero .btn{ min-width:190px; } @media(max-width:768px){ .study-hero h1{ flex-direction:column; } .study-hero .hero-buttons{ flex-direction:column; } .study-hero .btn{ width:100%; } } /* ========================================== CURRICULUM CATEGORY CARDS TEXT FIX ========================================== */ .interest-card p{ color:#334155; opacity:1; } .interest-card a{ margin-top:20px; color:#2D8FD5; font-weight:700; } .interest-card a:hover{ color:#69B34C; } /* ========================================== CURRICULUM LIBRARY CARD FIX ========================================== */ .curriculum-card{ background:#FFFFFF; color:var(--text); border:1px solid var(--border); box-shadow:var(--shadow); } .curriculum-card h3{ color:#1F3B57; } .curriculum-card p{ color:#64748B; opacity:1; } .curriculum-card a{ margin-top:20px; color:var(--blue); font-weight:700; } .curriculum-card a:hover{ color:var(--green); } /* ========================================== CURRICULUM FEATURED STUDY CARD SIZE ========================================== */ .featured-studies .study-card-grid { grid-template-columns: repeat(3, 1fr); gap: 25px; } .featured-studies .study-card { border-radius: 20px; } .featured-studies .study-card img { aspect-ratio: 1 / 1; height: 220px; } .featured-studies .study-content { padding: 20px; } .featured-studies .study-content h3 { font-size: 1.25rem; } .featured-studies .study-content p { font-size: 0.95rem; line-height: 1.5; } .featured-studies .study-footer a { font-size: 0.95rem; } /* CURRICULUM PAGE ONLY GRID FIX */ .featured-studies .study-card-grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } /* ========================================== CURRICULUM FEATURED STUDY CARDS ========================================== */ .study-card-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; align-items:stretch; } .study-card-grid .study-card{ display:flex; flex-direction:column; background:#FFFFFF; border-radius:28px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); transition:.3s ease; } .study-card-grid .study-card:hover{ transform:translateY(-8px); } .study-card-grid .study-card img{ width:100%; aspect-ratio:1 / 1; object-fit:cover; } .study-card-grid .study-content{ display:flex; flex-direction:column; flex:1; padding:28px; } .study-card-grid .study-content h3{ font-size:1.5rem; margin-bottom:15px; } .study-card-grid .study-content p{ flex:1; color:var(--light-text); line-height:1.7; } .study-card-grid .study-footer{ margin-top:25px; } @media(max-width:1200px){ .study-card-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .study-card-grid{ grid-template-columns:1fr; } } /* ========================================== CURRICULUM FEATURED STUDY CARDS ========================================== */ .study-card-grid{ display:grid; grid-template-columns:repeat(3,minmax(360px,1fr)); gap:40px; align-items:stretch; } .study-card-grid .study-card img{ width:100%; aspect-ratio:1 / 1; object-fit:cover; } .study-card-grid .study-content{ padding:35px; } .study-card-grid .study-content h3{ font-size:1.8rem; margin-bottom:18px; } .study-card-grid .study-content p{ font-size:1.05rem; line-height:1.8; } @media(max-width:1200px){ .study-card-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .study-card-grid{ grid-template-columns:1fr; } } /* ========================================== CURRICULUM STUDY GRID SIZE ========================================== */ .featured-studies .study-grid{ grid-template-columns:repeat(3, 1fr); gap:40px; } .featured-studies .study-card{ min-height:520px; } .featured-studies .study-card img{ width:100%; aspect-ratio:1 / 1; object-fit:cover; } .featured-studies .study-content{ padding:30px; } /* TEST CURRICULUM CARDS */ .featured-studies .study-card-grid { display:grid !important; grid-template-columns:repeat(3, 1fr) !important; gap:50px !important; } .featured-studies .study-card { width:100% !important; max-width:none !important; } .featured-studies .study-card img { height:350px !important; aspect-ratio:1 / 1 !important; object-fit:cover !important; } /* ============================================= FAMILY ENGAGEMENT LIBRARY ENHANCEMENTS =============================================*/ /* Hero Section */ .library-hero { padding: 80px 0; background: #f5f7fa; text-align: center; } .library-hero h1 { font-size: 2.5rem; margin-bottom: 15px; color: #1e3a8a; } .library-hero p { font-size: 1.1rem; margin-bottom: 25px; color: #333; max-width: 700px; margin-left: auto; margin-right: auto; } .library-hero .btn { margin: 5px; } /* Study Card Grid */ .study-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 25px; margin-top: 40px; } .study-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.08); display: flex; flex-direction: column; transition: transform 0.25s, box-shadow 0.25s; } .study-card:hover { transform: translateY(-6px); box-shadow: 0 10px 25px rgba(0,0,0,0.15); } /* Images in cards square and cover */ .study-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } /* Study content */ .study-content { padding: 15px; flex: 1; display: flex; flex-direction: column; } .study-content h3 { font-size: 1.2rem; margin-bottom: 10px; color: #1e3a8a; } .study-content p { flex-grow: 1; font-size: 0.95rem; color: #444; margin-bottom: 12px; } .study-footer { text-align: right; } .study-footer a { text-decoration: none; font-weight: 600; color: #1e73be; transition: color 0.2s; } .study-footer a:hover { color: #145a8a; } /* Section headers */ .section-header h2 { font-size: 2rem; margin-bottom: 10px; color: #1e3a8a; } .section-header p { font-size: 1rem; color: #555; } /* Footer Enhancements */ footer { background: #1e3a8a; color: #fff; padding: 50px 0 20px; } footer a { color: #fff; text-decoration: none; } footer a:hover { text-decoration: underline; } .footer-bottom { text-align: center; margin-top: 20px; font-size: 0.9rem; color: #d1d5db; } /* Responsive adjustments */ @media (max-width: 768px) { .library-hero h1 { font-size: 2rem; } .library-hero p { font-size: 1rem; } }